<template>
  <div :class="[rootClassName, bgImageClass]" ref="mySwiperRef">
    <v-btn class="help-btn" text v-if="isShowHelp" @click="handleShowHelp">帮助</v-btn>
    <div class="help" ref="helpRef" v-if="isShowHelp">
      <svg
        t="1709765634023"
        class="icon"
        viewBox="0 0 1334 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5627"
        width="200"
        height="200"
      >
        <path
          d="M798.782061 958.712242l-1.024-0.682666c-1.365333-0.961939-3.475394-2.01697-5.306182-2.978909l-0.713697-0.465455c-0.961939-0.589576-2.07903-1.148121-2.947879-1.768727l-4.840727-2.854788-0.527515-0.248242-243.743031-152.234667a129.520485 129.520485 0 0 1-57.250909-78.78594 126.417455 126.417455 0 0 1 12.846546-95.573333 120.149333 120.149333 0 0 1 106.52703-59.45406L431.569455 198.656c-29.820121-63.363879-6.11297-137.464242 52.658424-164.83297 58.709333-27.368727 130.761697 2.048 160.395636 65.567031l54.675394 117.294545a94.332121 94.332121 0 0 1 24.762182-16.849454c27.772121-12.970667 60.291879-11.791515 89.584485 2.637575 10.022788-16.384 24.420848-29.478788 41.580606-37.732848a97.745455 97.745455 0 0 1 63.860363-6.206061c16.725333 3.878788 32.768 11.481212 46.917819 22.372849 7.354182-6.795636 15.670303-12.474182 24.669091-16.694303 54.737455-25.506909 123.314424 5.523394 152.948363 69.073454l143.049697 306.765576c31.650909 67.863273 36.615758 156.889212 12.722424 226.831515-13.312 38.974061-34.257455 66.870303-59.174787 78.506667L937.115152 986.701576c-56.785455 26.499879-101.965576-3.723636-138.364122-27.989334z m421.205333-172.900848c9.18497-4.313212 24.855273-30.316606 31.464727-74.78303 6.919758-47.879758 0.217212-98.241939-18.307879-137.960728l-147.176727-315.578181c-12.008727-25.786182-38.384485-40.773818-56.506182-32.302546a26.686061 26.686061 0 0 0-10.084848 8.285091l51.448242 110.374788-0.124121 0.06206c7.323152 19.083636-0.806788 40.339394-18.680242 48.810667-17.966545 8.378182-39.749818 0.744727-49.493334-17.035636l-0.06206 0.03103-44.652606-95.728485-14.584243-25.941333c-12.908606-23.117576-37.360485-35.529697-54.489212-27.523879-7.571394 3.506424-13.436121 11.357091-16.290909 21.255758l55.637333 119.373575c9.060848 19.549091 1.117091 42.480485-17.749333 51.293091-18.866424 8.719515-41.518545 0.062061-50.672485-19.393939l-48.934788-105.006545-8.316121-11.077819c-13.746424-18.432-35.064242-27.182545-49.493333-20.48-9.836606 4.592485-16.446061 16.135758-17.811394 30.626909l54.116848 118.877091 20.790303 44.528485c8.067879 17.283879 0.930909 37.85697-15.763394 45.645576l-7.416242 3.475394c-16.756364 7.819636-37.019152 0-45.08703-17.283879l-165.701819-355.390061-6.019878-12.412121c-12.412121-26.59297-41.115152-39.408485-64.201697-28.672-23.086545 10.767515-31.681939 41.084121-19.331879 67.615031l162.536727 344.622545c0.589576 1.024 1.117091 2.07903 1.613576 3.134061l63.891394 137.029818c7.943758 17.749333 2.07903 38.446545-13.777455 48.593454a37.85697 37.85697 0 0 1-49.400242-8.25406l-30.906182-32.768a51.293091 51.293091 0 0 0-39.222303-6.671515 49.958788 49.958788 0 0 0-31.650909 23.58303c-14.398061 24.793212-6.11297 57.344 18.494061 72.766061l251.097212 156.578909 0.775757 0.403394 3.103031 1.954909 3.847757 2.389333c2.420364 1.551515 4.902788 3.04097 7.012849 4.096l1.520484 0.775758 1.427394 1.241212c40.339394 26.996364 52.906667 31.030303 70.190546 22.962424L1220.111515 785.997576l-0.124121-0.248243v0.062061z"
          fill="#ffffff"
          p-id="5628"
        ></path>
        <path
          d="M257.861818 158.068364l77.482667 41.208242a6.206061 6.206061 0 0 0 8.843636-7.292121L295.96703 34.195394a6.206061 6.206061 0 0 0-7.757575-4.12703L130.420364 78.320485a6.206061 6.206061 0 0 0-1.086061 11.388121l73.479758 39.098182a1189.515636 1189.515636 0 0 0-192.077576 535.117576 1207.233939 1207.233939 0 0 0-6.516364 139.729454c-1.799758 17.066667 13.156848 32.581818 28.827152 34.226424 15.670303 1.644606 33.543758-9.712485 33.450666-27.67903 0-1.427394-0.062061-2.792727-0.186181-4.189091-0.620606-44.714667 1.365333-89.987879 6.17503-135.602424a1127.641212 1127.641212 0 0 1 185.40606-512.310303z"
          fill="#ffffff"
          opacity=".9"
          p-id="5629"
        ></path>
      </svg>
      <div class="help-text">搜索经文后，可上下滑动此处调节投屏端显示</div>
      <v-btn class="close" text @click="closeHelpAin">关闭,并不在提示</v-btn>
    </div>
    <p class="jwtext" :style="textStyle" v-html="jwText"></p>
  </div>
</template>
<script>
import gsap from "gsap";

const closeJwHelp = "closeJwHelp";
export default {
  name: "JcJwTypeSwiper",
  props: {
    shijiName: {
      type: String,
      default: "",
    },
    showTitle: {
      type: Boolean,
      default: false,
    },
    firstSliderBgImg: {
      type: String,
      default: "firstBgjb-t",
    },
    zhutiTitleStyle: {
      type: Object,
      default: () => ({
        fontSize: "1.5rem",
        color: "#fff",
      }),
    },
    zhutiTitle: {
      type: String,
      default: "",
    },
    createRow: {
      type: Array,
      default: () => [],
    },
    textStyle: {
      type: Object,
      default: () => ({
        fontSize: "1rem",
        color: "#fff",
      }),
    },
    title: {
      type: String,
      default: "",
    },
    bgImageClass: {
      type: String,
      default: "bgjb",
    },
    textShadow: {
      type: Number,
      default: 0,
    },
    publicStyle: {
      type: String,
      default: "",
    },
    textAlign: {
      type: String,
      default: "center",
    },
    jwLongText: {
      type: String,
      default: "",
    },
    rootClassName: {
      type: String,
      default: "myswiper",
    },
    scrollProgress: {
      type: Number,
      default: 0,
    },
    isShowHelp: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    jwText() {
      return this.jwLongText
        .split("\n")
        .map((item) => `<p>${item}</p>`)
        .join("");
    },
  },
  data() {
    return {
      isAddScrollEvent: false,
      helpAin: null,
    };
  },
  mounted() {
    this.addEvent();
  },
  activated() {
    this.addEvent();
  },
  deactivated() {
    this.$refs.mySwiperRef.removeEventListener("scroll", this.handleScroll);
  },
  distroyed() {
    this.$refs.mySwiperRef.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    addEvent() {
      if (this.isAddScrollEvent) return;
      this.$refs.mySwiperRef.addEventListener("scroll", this.handleScroll);
      this.isAddScrollEvent = true;
      if (localStorage.getItem(closeJwHelp)) {
        this.$refs.helpRef.style.display = "none";
        return;
      }
      this.handleHelpAin();
    },
    handleHelpAin() {
      if (this.isShowHelp) {
        this.helpAin = gsap.fromTo(
          ".help svg",
          { rotate: -30, y: 10 },
          {
            rotate: 10,
            y: -50,
            duration: 1,
            repeat: -1,
            yoyo: false,
          }
        );
      }
    },
    handleScroll() {
      const progress = this.$refs.mySwiperRef.scrollTop / this.$refs.mySwiperRef.scrollHeight;
      this.$emit("scroll", progress);
    },
    scrollTo(progress) {
      this.$refs.mySwiperRef.scrollTop = progress * this.$refs.mySwiperRef.scrollHeight;
    },
    closeHelpAin() {
      this.helpAin.kill();
      this.helpAin = null;
      this.$refs.helpRef.style.display = "none";
      localStorage.setItem(closeJwHelp, 1);
    },
    handleShowHelp() {
      this.$refs.helpRef.style.display = "block";
      this.handleHelpAin();
    },
  },
  watch: {
    scrollProgress(progress) {
      this.scrollTo(progress);
    },
    jwText() {
      this.$refs.mySwiperRef.scrollTop = 0;
    },
  },
};
</script>
<style scoped>
.myswiper {
  width: 600px;
  height: 360px;
  overflow: scroll;
  margin: 0 auto;
  position: relative;
}
.fySwiper {
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  position: relative;
}
@media screen and (max-width: 600px) {
  .myswiper {
    width: 100% !important;
    height: 200px !important;
    position: relative;
  }
  .myswiperth {
    width: 100% !important;
    height: 60px !important;
  }
}
.jwtext {
  padding: 10px;
}
.help {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.help .help-text {
  color: #fff;
  font-size: 14px;
  text-align: center;
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
}
.help svg {
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  width: 60px;
  height: 60px;
}
.help .close {
  position: absolute;
  left: 10px;
  top: 10px;
}
.help-btn {
  position: fixed;
  right: 10px;
  top: 62px;
  z-index: 2;
}
</style>
